<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>state的基本使用</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用户解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="test"></div>
		<hr/>
		<div id="test2"></div>

		<script type="text/babel">
			//定义组件
			class Weather extends React.Component{
				constructor(props){
					console.log('---constructor---') //构造器调用几次？ —————— 1次
					super(props)
					//初始化state，要求：state必须为一个对象
					this.state = {isHot:false,wind:'微风'} 
					//下面这行是为了解决changeWeather中this指向的问题
					this.gaiTianQi = this.changeWeather.bind(this)
				}
				render(){
					console.log('---render---') //render调几次？———————— 1+n次，1是初始化那次，n是state改变的次数。
					return (
						<div>
							<h2 onClick={this.gaiTianQi}>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h2>
							<h3>风力：{this.state.wind}</h3>	
						</div>
					)
				}
				//changeWeather放在哪里？———— Weather的原型上，通过实例可以看见
				//changeWeather中的this是谁？———— 通过Weather的实例调用，那么changeWeather中的this就是Weather的实例
				//类式组件中的方法如果做事件回调去使用，this是undefined
				//改变天气的回调
				changeWeather(){ //changeWeather调用几次？ —————— 点几次调几次
					//state中的数据不可以直接修改，下面这行就是直接修改
					// this.state.isHot = true
					
					//获取原状态
					const {isHot} = this.state
					//修改state一定要调用setState这个方法去修改
					this.setState({isHot:!isHot}) //setState做了两件事：1.改变state 2.重新调用了一次render
				}
			}
			//渲染组件
			ReactDOM.render(<Weather/>,document.getElementById('test'))
			ReactDOM.render(<Weather/>,document.getElementById('test2'))
		</script>
	</body>
</html>